.header {
	height: 200px;
	background-color: red;
}
.DisplayArea {
	height: 100%;
	width: 100%;
	padding: 10px;

	margin-bottom: 80px;
	.boxone {
		width: 100%;
		height: 150px;
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		.boxoneleft {
			width: 150px;
			height: 150px;
			background-color: salmon;
			border-radius: 10px;
			margin-right: 20px;
			background: url(../../assets/imgs/index-card-rank.png) no-repeat center;
			background-size: 100px;
			background-position: -30% 50%;
			background-color: #54b0da;
		}
		.boxoneright {
			width: 212px;
			height: 150px;
			background-color: bisque;
			border-radius: 10px;
			background: url(../../assets/imgs/index-card-sum.png) no-repeat center;
			background-size: 100px;
			background-position: 5% 40%;
			background-color: #9fd9f8;
		}
	}
	.boxtwo {
		height: 100px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		div {
			height: 100%;
			width: 180px;
		}
		.boxtwoleft {
			margin-right: 10px;
			color: #fff;
			background: url(../../assets/imgs/index-card-data.png) no-repeat center;
			background-size: cover;
		}
	}
	.boxthree {
		overflow-y: scroll;
		div {
			margin-bottom: 10px;
			background-color: aquamarine;
			width: 100%;
			height: 100px;
			border-radius: 15px;
			padding: 10px;
			background: url(../../assets/imgs/course-img05.jpg) no-repeat center;
			background-size: cover;
			color: #fff;
		}
	}
}
.swiper {
	width: 100%;
}
.image1 {
	background: url(../../assets/imgs/course-img05.jpg) no-repeat center/cover;
}
.image2 {
	background: url(../../assets/imgs/course-img04.jpg) no-repeat center/cover;
}
.image3 {
	background: url(../../assets/imgs/course-img03.jpg) no-repeat center/cover;
}

.DisplayArea {
	overflow-y: scroll;
	&::-webkit-scrollbar {
		display: none;
	}
}
#Ranking {
	position: absolute;
	right: 10px;
	bottom: 20px;
	font-size: 30px;
	color: #fff;
}
#Punchbtn {
	position: absolute;
	right: 10px;
	bottom: 20px;
	border-radius: 20px;
	border: 2px #005177 solid;
	width: 100px;
	height: 30px;
	background: rgba(30, 30, 30, 0);
}
#NumberHonors {
	position: absolute;
	bottom: 30px;
	right: 20px;
	color: #004e73;
	span {
		font-size: 40px;
	}
}
